<template>
  <div>
    <p class="pinformation" style="margin-top: 7px;">搜索条件</p>
    <el-form label-width="100px" :model="queryParams" ref="queryParamsRef">
      <el-row>
        <el-col :span="4">
          <el-form-item label="方案编号：" prop="projectCode">
            <el-input v-model="queryParams.projectCode" clearable maxlength="100" @keyup.enter="getList" placeholder="请输入方案编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="方案名称：" prop="projectName">
            <el-input v-model="queryParams.projectName" clearable maxlength="100" @keyup.enter="getList" placeholder="请输入方案名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="委托单位：" prop="wtCustomName">
            <el-input v-model="queryParams.wtCustomName" clearable maxlength="100" @keyup.enter="getList"  placeholder="请输入委托单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="合同编号：" prop="contractCode">
            <el-input v-model="queryParams.contractCode" clearable maxlength="100" @keyup.enter="getList"  placeholder="请输入合同编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同名称：" prop="contractName">
            <el-input v-model="queryParams.contractName" clearable maxlength="100" @keyup.enter="getList"  placeholder="请输入合同名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="方案类型：" prop="contractType">
            <el-select clearable v-model="queryParams.contractType">
              <el-option
                v-for="dict in proxy.addListNoLimit(sys_contract_type)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              <el-tooltip
                    class="box-item"
                    effect="customized"
                    placement="right"
                  >
                    <template #content>
                      {{ dict.label }}
                    </template>
                    <div
                      style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ dict.label }}
                    </div>
                  </el-tooltip>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="加急状态：" prop="degree">
            <el-select clearable v-model="queryParams.degree">
              <el-option
                v-for="dict in proxy.addListNoLimit(sys_degree)"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="受检单位：" prop="sjCustomName">
            <el-input v-model="queryParams.sjCustomName" clearable maxlength="100" @keyup.enter="getList"  placeholder="请输入受检单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="计划开始时间：">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              :clearable="false"
              :editable="false"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="采样人员：" prop="cyUserId">
            <el-select v-model="queryParams.cyUserId" filterable clearable>
                <el-option
                  v-for="item in proxy.addListNoLimit(userList, 'userId', 'nickName')"
                  :value="item.userId"
                  :key="item.userId"
                  :label="item.nickName"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-row justify="end">
            <el-button type="success" @click="getList">搜索</el-button>
            <el-button class="business resetBtn" @click="resetBtn">重置</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { listUser } from "@/api/contract/check";
const { proxy } = getCurrentInstance();
const { sys_contract_type, sys_degree, sys_project_step } = proxy.useDict(
  "sys_contract_type",
  "sys_degree",
  "sys_project_step"
);

const dateRange = ref([]);

const props = defineProps({
  stepId: {
    type: Number, //参数类型
  },
});

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stepId: 2,
    contractType: -1,
    degree: -1,
    cyUserId: -1,
    stepId: props.stepId,
  }
});
const { queryParams } = toRefs(data);

const emits = defineEmits(["queryParamsDate"]);

function getList() {
  emits("queryParamsDate", proxy.addDateRange(queryParams.value, dateRange.value));
}

function resetBtn() {
  proxy.resetForm("queryParamsRef");
  dateRange.value = []
  emits("queryParamsDate", proxy.addDateRange(queryParams.value, dateRange.value));
}

const userList = ref([]);
listUser().then((res) => {
  userList.value = res.data;
});

getList()
</script>


<style>
</style>
